<template>
    <div>
        <div id="Columnar"></div>
    </div>

</template>
<script setup>
import { ref, reactive, toRefs, onMounted } from "vue"
import * as echarts from 'echarts';
import { useStore } from "vuex";
const store=useStore()
var option = null;
let amount=[]
let time=[]
store.state.dailyCurve.dailyCurve.forEach(element => {
    console.log(element.amount);
        amount.push(element.amount)
        time.push(element.time)
});
option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  legend: {
    data: ['月累计收益', 'Precipitation', '日收益曲线']
  },
  xAxis: [
    {
      type: 'category',
      data: time,
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: 'Precipitation',
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: '{value} 万元'
      }
    },
    {
      type: 'value',
      name: 'Temperature',
     
    }
  ],
  series: [
    {
      name: '月累计收益',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' 万元';
        }
      },
      data: amount
    },
    {
      name: '日收益曲线',
      type: 'line',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' 万元';
        }
      },
      data: amount
    }
  ]
};
console.log(1111,amount);
console.log(2222,time);
onMounted(() => {
    setTimeout(() => {
        var chartDom = document.getElementById('Columnar');
        var myChart = echarts.init(chartDom);
        option && myChart.setOption(option);
    }, 1000)
})
</script>
<style lang="scss" scoped>
#Columnar {
    width: 100%;
    height: 300px;
}
</style>